<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_事件监听</title>
</head>
<body>
    <button onclick="alert('警告框')">弹出警告框</button>
    <button id="btn">我是按钮</button>
    <h4>注意:天气转凉你应该做这些事...</h4>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex expedita nobis officiis optio! Architecto
            atque cupiditate, dolor facilis ipsam ipsum iusto provident quam quia quibusdam sed similique temporibus
            tenetur velit!
        </div>
        <div>A, aliquam atque commodi consectetur distinctio doloremque ea error eum fugit ipsum iure libero maxime
            minus modi nemo nihil nulla odio perferendis quidem quis tempora tenetur ullam veniam voluptates voluptatum.
        </div>
        <div>Autem beatae, dicta, dolores eius error eum, eveniet laboriosam magnam nesciunt nihil nulla obcaecati
            pariatur quisquam quos reprehenderit. Aspernatur dolore esse est maxime odio officia porro quae quibusdam,
            ratione veniam.
        </div>
        <div>Dolorum inventore nisi quisquam repellat tenetur ut veniam! Beatae doloremque et impedit, in labore nemo
            omnis pariatur possimus quisquam ut. Animi ex inventore minima nesciunt nobis odio omnis porro vero?
        </div>
        <div>Culpa cupiditate et maxime nobis nostrum odio quos? Asperiores commodi debitis harum nostrum sequi?
            Cupiditate dolorum ducimus, impedit laborum minima mollitia nulla perspiciatis quibusdam quidem recusandae
            repellat soluta temporibus, voluptate.
        </div>
        <div>Animi architecto, assumenda aut eos fuga fugit libero necessitatibus quaerat sunt voluptates! Assumenda
            deleniti ea eaque est eum explicabo inventore ipsa magnam nisi, officia placeat quas sed unde. Doloremque,
            dolorum.
        </div>
        <div>Aliquid asperiores cupiditate ea ipsa iste, molestiae obcaecati officiis quas rerum voluptatem. Adipisci
            animi aperiam autem consequuntur dolore ducimus eveniet fugit, illum iusto nulla perferendis quibusdam
            repellat sapiente sequi sint!
        </div>
        <div>Animi aperiam deleniti distinctio ducimus facilis fugit maiores minus quidem tempore voluptatum. Cum cumque
            enim et nisi nobis quibusdam quos rem repudiandae. Aut culpa cumque distinctio enim laborum praesentium
            quis.
        </div>
        <div>Atque dolorum eius itaque laborum minima non quam sed tenetur veritatis! Dignissimos est minus nihil odio,
            praesentium quibusdam vel? Ducimus earum eius enim eos est molestiae perferendis quibusdam sit ullam?
        </div>
        <div>Accusamus adipisci aut dolore eligendi id in iusto nobis non quibusdam voluptates. Accusantium deserunt
            dolorem doloremque ipsum ratione. Adipisci commodi doloribus eos inventore ipsa ipsum natus officia porro
            vel vero!
        </div>
        <div>Fugit id molestias nam perferendis quis quos voluptas. Architecto autem dicta doloribus eaque est, et eum
            labore minima molestias natus nesciunt nihil nisi nostrum odit placeat, repellat reprehenderit sit, tenetur!
        </div>
        <div>Ab consequuntur error molestias quibusdam? Earum in iusto magnam nam nemo neque nihil nulla praesentium,
            quaerat quas quisquam repellat sapiente sunt suscipit tempora tenetur ut! Ad asperiores ex ipsa quod!
        </div>
        <div>Blanditiis dicta dolore doloremque doloribus dolorum enim exercitationem expedita maxime nihil, officiis
            porro quidem rem. Accusamus architecto autem earum esse necessitatibus nesciunt, odio quae quibusdam quos
            repellendus, voluptas voluptates voluptatibus?
        </div>
        <div>Aperiam asperiores aut culpa debitis illum optio qui quisquam, reiciendis, reprehenderit tempora veniam,
            voluptatum. Atque autem beatae enim, laudantium obcaecati possimus tempora temporibus voluptates. Esse illum
            molestias numquam tempore ullam?
        </div>
        <div>Aliquid aperiam corporis distinctio earum excepturi facere, inventore nostrum porro saepe soluta tempora,
            tempore! Aliquid animi aperiam beatae cumque distinctio ea eos eveniet fuga, iure maiores praesentium quam
            sequi voluptatum?
        </div>
        <div>Aperiam iure iusto laborum laudantium quibusdam? Aliquid cumque, delectus ducimus enim, est eveniet
            expedita hic ipsum iste itaque libero magnam minima qui quis repudiandae sit unde. Asperiores maxime
            obcaecati porro.
        </div>
        <div>Ab aperiam architecto consectetur corporis, cumque debitis dignissimos ea eaque facere in iure minus
            molestias nobis non odio perferendis quo ratione, recusandae sapiente sunt, tempora tempore temporibus totam
            velit voluptatibus?
        </div>
        <div>Aut ducimus explicabo itaque modi nemo nobis omnis quisquam veniam? Aliquid animi distinctio eveniet
            laboriosam magni maiores perferendis quisquam tenetur? Amet impedit in minima non odit quis soluta vel
            voluptatibus?
        </div>
        <div>Ab accusamus at consequatur dolores ducimus exercitationem illum laboriosam libero minima mollitia
            obcaecati perferendis placeat quaerat quo recusandae sequi, ullam, velit voluptatem? Alias eos iste labore
            mollitia quidem soluta ullam?
        </div>
        <div>Ab aliquid dolor est impedit incidunt ipsum, libero, omnis pariatur possimus repellat sapiente sit tenetur
            unde? Aliquid atque eaque est, facere illo iusto, nihil porro praesentium quia repellat, tenetur
            voluptatibus.
        </div>
        <div>A aliquam, amet cum eum eveniet expedita facere nam officia officiis reiciendis repellat reprehenderit
            similique sint tempore ullam vel voluptate. Amet cum debitis dicta expedita impedit perferendis quasi
            repellendus sapiente!
        </div>
        <div>Alias aliquid aspernatur consequatur deserunt eaque iste magni, molestiae nostrum numquam officiis quam
            reiciendis saepe voluptatem. Blanditiis cupiditate dolorem doloremque eos illum molestias nisi quis ratione
            unde voluptas, voluptatibus voluptatum?
        </div>
        <div>Beatae deserunt excepturi fuga illo laudantium! Ad dignissimos ex expedita modi, optio porro possimus
            quibusdam reiciendis sapiente! Architecto assumenda eaque et eum explicabo labore molestiae mollitia
            praesentium, quisquam soluta totam?
        </div>
        <div>Ab culpa, cumque dignissimos dolorem doloribus, ducimus eos eum excepturi fugiat ipsa necessitatibus odio
            perspiciatis quam sed similique tempore vero vitae voluptas! Aut delectus itaque modi officiis, quaerat quod
            vel?
        </div>
        <div>Cumque delectus ea earum est ipsa, iure maiores maxime nesciunt nisi numquam perferendis quae quo quod sed
            velit? Atque consequatur culpa et illo in iure mollitia optio, quis repudiandae sint?
        </div>
        <div>Debitis ducimus fugit, incidunt, ipsam magnam optio quasi rerum sapiente sequi sunt, unde ut velit vitae?
            Dicta dignissimos eos, est, fuga iusto nemo nesciunt officiis omnis quaerat sapiente, unde voluptas!
        </div>
        <div>Alias distinctio dolor non odit possimus sint totam velit! Asperiores consequuntur corporis cum est
            explicabo facere harum ipsa laborum libero optio provident quia quidem quis reprehenderit sunt, temporibus
            voluptatibus? Quibusdam!
        </div>
        <div>Accusantium architecto atque commodi consequatur distinctio et expedita fugiat harum illo impedit, in iure
            nemo numquam officiis omnis quas quidem ullam ut velit vero! Laborum minima necessitatibus numquam quaerat
            quam?
        </div>
        <div>Atque consequatur eos explicabo facilis nisi nostrum numquam, odit pariatur possimus provident quod
            reiciendis repellendus saepe unde voluptatem. Ad at explicabo harum in itaque, labore maiores nesciunt
            quibusdam reprehenderit voluptatum.
        </div>
        <div>Accusantium, alias autem dolore fugit iure neque omnis quidem reiciendis repudiandae. Aliquid amet dicta ea
            et, eveniet incidunt minima neque omnis pariatur porro quas, quidem quos reiciendis repudiandae similique
            voluptatibus?
        </div>
        <div>A ab, aperiam at, cum doloremque eaque error expedita fuga harum iste iure laboriosam minus molestias neque
            nobis possimus praesentium quaerat ratione reiciendis reprehenderit rerum sed voluptatem. Dolor, mollitia,
            quis?
        </div>
        <div>Accusantium ad alias aperiam commodi cumque debitis, doloremque error eum excepturi facere laboriosam
            magnam minus, modi mollitia nisi nostrum officia omnis perferendis porro provident rerum sapiente sit
            tempore velit veritatis.
        </div>
        <div>Facilis laborum mollitia rem. Aliquid asperiores consectetur culpa cum dolorem ea eos, eum expedita illum
            ipsam laboriosam minima mollitia nobis nostrum numquam pariatur praesentium quae quidem reprehenderit sit
            veritatis vitae.
        </div>
        <div>Deserunt dolore harum ipsa molestias necessitatibus nemo placeat, saepe sunt tempore voluptas. Alias
            aperiam assumenda, doloremque dolores eligendi est hic id incidunt, iure nobis nulla omnis quaerat quis, ut
            vitae?
        </div>
        <div>A alias animi aspernatur at aut dignissimos, eveniet expedita facere fuga fugit illo, illum incidunt
            mollitia necessitatibus nihil possimus soluta. Ab, aspernatur, ipsum? Aut, enim incidunt iste minus
            molestiae velit?
        </div>
        <div>A adipisci aliquam at beatae, commodi dicta ex iure magni natus nemo neque nesciunt numquam possimus quo
            sapiente, sint veritatis voluptates voluptatum. Aliquam blanditiis doloremque ipsa nihil obcaecati odio quo!
        </div>
        <div>A animi dolor doloribus, ea eius ex excepturi facilis illo impedit ipsa laboriosam, laborum laudantium
            magnam minima odit rerum saepe similique soluta ut voluptates? Consectetur impedit necessitatibus optio quae
            totam?
        </div>
        <div>Commodi delectus dolores enim exercitationem facere impedit inventore ipsum necessitatibus, non
            perspiciatis, porro possimus similique sint. Asperiores illo ipsam iure neque optio perferendis, tempore
            voluptate? At atque officia vel veniam?
        </div>
        <div>Amet assumenda culpa cum dolorem ducimus ea eius enim facilis maxime nemo, nobis numquam omnis quam quo
            sapiente similique suscipit. Aliquid at debitis facilis fugit harum minima nam ratione, rem?
        </div>
        <div>Earum enim iusto rerum temporibus. Excepturi illo sapiente suscipit vero! Aliquam architecto corporis
            dolore ex molestias nemo nostrum, optio unde? Eos error exercitationem incidunt possimus quibusdam repellat
            similique tempore vel?
        </div>
        <div>A accusantium amet aperiam asperiores blanditiis consectetur dicta doloremque dolores eveniet ipsum,
            laudantium nemo non perspiciatis placeat provident quaerat quam quasi quibusdam reiciendis rem sed tenetur
            totam vel voluptas, voluptatum!
        </div>
        <div>Ab alias deleniti dicta dolorem harum maxime neque, porro quasi quia reprehenderit sequi tempore vitae
            voluptate? Aliquam eius libero molestias quam? Ab asperiores, distinctio ea inventore mollitia quam quos
            repellat.
        </div>
        <div>Adipisci asperiores beatae distinctio eveniet magni minus nam sapiente temporibus. Animi cupiditate earum,
            eligendi facere fugit numquam perspiciatis reiciendis. Assumenda aut dicta facilis nam nesciunt porro quia
            repellendus sapiente vitae.
        </div>
        <div>Delectus eius error est eveniet fugit ipsam iste laboriosam laudantium molestiae nisi odio, optio porro
            praesentium quasi sapiente sint soluta vitae? Culpa enim facere fugit iusto necessitatibus, reprehenderit
            tempore vel?
        </div>
        <div>Atque error, incidunt magnam necessitatibus quisquam rerum sapiente? Ab, aspernatur blanditiis dolore
            dolorum enim error ex excepturi fuga fugit laboriosam nemo nihil nisi praesentium quas quis reprehenderit
            vitae. Eaque, tenetur!
        </div>
        <div>A culpa fugit id in libero neque, praesentium? Alias aliquid aspernatur culpa dolor doloremque excepturi id
            iste nostrum omnis optio perferendis placeat, quo reiciendis sed sequi veniam veritatis voluptas voluptate?
        </div>
        <div>Autem dolores eius eveniet expedita maxime, minima obcaecati officia tempore. Alias aliquam assumenda
            earum, hic incidunt iste iusto magnam mollitia neque nisi obcaecati, optio quam sint, tempora totam veniam
            vitae.
        </div>
        <div>Aut blanditiis consequuntur distinctio eligendi esse eveniet fugit ipsum labore laborum laudantium
            molestiae, porro provident quae similique sint soluta voluptas voluptatibus. Dicta, eius expedita harum
            laudantium quae recusandae sequi ut?
        </div>
        <div>Aliquam aperiam assumenda at consectetur cum doloremque dolorum, est eum eveniet harum hic illum in
            incidunt, iste magni, minima nulla officia pariatur quae quo sunt ullam veritatis voluptatem! Fugit, sit?
        </div>
        <div>Adipisci animi asperiores atque aut autem debitis deleniti doloremque eius eveniet facilis illo labore
            libero magni molestias nisi nulla, numquam praesentium quasi quisquam, rerum sapiente sed unde, vitae
            voluptate voluptatem.
        </div>
        <div>Dignissimos doloribus iste minus mollitia quam soluta veniam vero, voluptate. Ab aliquam blanditiis dolore
            ea earum, id illum laboriosam mollitia nihil obcaecati officiis possimus quae quod reprehenderit unde
            voluptatem voluptates.
        </div>
        <div>Adipisci aliquid eligendi ex, facilis ipsa iste laborum maxime nam nobis nostrum numquam odio officiis
            quaerat quis quod, recusandae sequi sint voluptate? Cupiditate hic labore laborum modi voluptatibus? Cum,
            expedita.
        </div>
        <div>Deleniti doloremque dolores eaque minus nemo quibusdam. Alias corporis eum tempore vero voluptate! Aut
            dignissimos eius error est, eum facere fugiat laboriosam necessitatibus odio quam qui, rem sequi totam,
            ullam?
        </div>
        <div>At, beatae blanditiis consectetur consequatur culpa deserunt dolor dolorem eligendi eos expedita explicabo
            illum, laborum magnam molestias nisi nobis numquam officiis perferendis possimus quisquam quos repellendus
            similique tempora vero voluptatem.
        </div>
        <div>A ad asperiores autem dolore eaque eos error eum, excepturi harum id itaque iure necessitatibus odit porro
            repellendus ut vel vitae. Assumenda ipsum quaerat soluta. Animi modi necessitatibus sed unde.
        </div>
        <div>Accusamus ad asperiores beatae commodi dolor doloremque ea, enim est fugit hic laboriosam libero maxime
            nesciunt officiis porro quaerat quam quis quisquam quod tempora tenetur veniam vitae! Esse obcaecati,
            voluptates.
        </div>
        <div>Aspernatur consectetur cum dicta doloremque dolorum ducimus eius esse facere, fugit illo illum impedit,
            incidunt iste iure labore maxime minima mollitia perspiciatis quibusdam quod rerum sit soluta veritatis vero
            vitae.
        </div>
        <div>Ad assumenda, autem cupiditate delectus dolorem eaque error eveniet quo sequi tenetur veritatis
            voluptatibus! Commodi ipsum praesentium quam quas recusandae sequi sit velit? Error numquam optio
            perspiciatis possimus rerum, temporibus!
        </div>
        <div>Aliquam assumenda atque aut, autem blanditiis corporis delectus ea eaque enim eos esse et fugit, ipsum
            itaque laborum libero natus nesciunt nihil nobis porro repellat sint tempore voluptas. Distinctio, ipsam.
        </div>
        <div>Adipisci consequuntur eaque eius labore minus nam quaerat quam suscipit totam veniam. Corporis culpa
            cupiditate dignissimos, distinctio eos fuga illum minus nemo numquam officiis, pariatur porro quae quos sit,
            voluptatem!
        </div>
    </div>

    <script>
        /* 鼠标点击事件 */
        let buttonE = document.querySelector('#btn');
        buttonE.addEventListener('click',function(){
            alert('按钮被点击了!');
        })

        /* 鼠标移入事件 */
        let h4E = document.querySelector('h4');
        h4E.addEventListener('mouseover',function(){
            console.log('该标题被查看了!');
        })

        /* window对象浏览器内置的全局对象,代表了当前浏览器窗口 */
        // window.addEventListener('resize',function(){
        //     alert('窗口大小被修改了!');
        // })
        // window.addEventListener('scroll',function(){
        //     alert('页面被滚动了!');
        // })

        /* 关于JS对象的使用 */
        //1.创建一个自带属性与方法的对象
        let p1 = {
            name:'张三',
            age:18,
            say:function(){
                console.log('我是'+this.name+'今年'+this.age+'岁');
            }
        };
        console.log(p1.name);
        console.log(p1.age);
        p1.say();

        //2.先创建一个空对象，再动态给其添加属性与方法
        let p2 = {};
        p2.name = '李四';
        p2.age = 19;
        p2.say = function(){
            console.log('我是'+this.name+'今年'+this.age+'岁');
        };
        console.log(p2.name);
        console.log(p2.age);
        p2.say();
    </script>
</body>
</html>